<template>
  <el-dialog
    ref="refAuditDlg"
    title="开业结果审核"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clearForm"
    width="700px"
    @close="closeDialog"
  >
    <div>
      <el-form ref="refForm" label-width="150px" label="left" :rules="formRules" :model="formData" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="审核结果:" prop="reviewResult">
              <el-select
                v-model="formData.reviewResult"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in auditOptions"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="审核意见:" prop="reviewAdvice">
              <el-input v-model="formData.reviewAdvice" placeholder="请输入审核意见" maxlength="1000" show-word-limit type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="实际开业活动开始时间:" prop="actualActivityStartTime">
              {{ detailData.actualActivityStartTime }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实际开业活动结束时间:" prop="actualActivityEndTime">
              {{ detailData.actualActivityEndTime }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="imgList.length>0">
          <el-col :span="24">
            <el-form-item label="现场活动照片:">
              <br>
              <el-image
                v-for="item in imgList"
                :key="item.id"
                style="width:100px;margin:0 10px"
                :src="item.attachmentUrl |filterURL"
                :preview-src-list="[filterURL(item.attachmentUrl)]"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="fileList.length>0">
          <el-col :span="24">
            <el-form-item label="开业评估:">
              <br>
              <file
                :data="fileList"
                :show-upload="false"
                :show-edit="false"
                :show-remove="false"
              />
            </el-form-item>
          </el-col>
        </el-row></el-form>
    </div>
    <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { filterURL } from '@/utils'
import file from '@/components/importFile/FileUploader'
import { getDictByPatchType } from '@/api/dataDict'
import { saveOpenState } from '@/api/shopOpenManage'
import { getShopAttachment } from '@/api/common.js'
export default {
  name: 'DemoEditForm',
  components: { file },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      filterURL,
      saveLoading: false,
      auditOptions: [], // 审核结果
      formData: {
        id: '',
        reviewResult: '1',
        reviewAdvice: '',
        schedule: '',
        constCode: '',
        actualActivityStartTime: '',
        actualActivityEndTime: '',
        shopAttachmentDTOList: []
      },
      imgList: [],
      fileList: [],
      allFileList: [],
      formRules: {
        reviewResult: [
          { required: true, message: '请选择审核结果', trigger: 'change' }
        ],
        reviewAdvice: [
          { required: true, message: '请填写审核意见', trigger: 'change' }
        ]
        // actualActivityStartTime: [
        //   { required: true, message: '请选择时间', trigger: 'change' }
        // ],
        // actualActivityEndTime: [
        //   { required: true, message: '请选择时间', trigger: 'change' }
        // ]
      }

    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.getDictByPatchTypeAll()
    // if (this.detailData.shopAttachmentAndTemplateDTOS && this.detailData.shopAttachmentAndTemplateDTOS.length > 0) {
    //   this.imgList = this.detailData.shopAttachmentAndTemplateDTOS
    // }
    this.getFiles()
  },

  methods: {
    // 获取附件
    getFiles() {
      getShopAttachment(this.detailData.id).then(res => {
        this.allFileList = res.data
        res.data.map(el => {
          if (el.attachmentType === '现场活动照片') this.imgList.push(el)
          if (el.attachmentType === '开业评估资料') this.fileList.push(el)
        })
      })
    },
    async getDictByPatchTypeAll() {
      const { REVIEW_RESULT } =
       await getDictByPatchType(['REVIEW_RESULT'])
      this.auditOptions = REVIEW_RESULT
    },
    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      this.formData = { }
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    // 提交表单处理
    submitForm() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          this.formData.id = this.detailData.id
          this.formData.schedule = this.detailData.schedule
          this.formData.constCode = this.detailData.constCode
          this.formData.actualActivityStartTime = this.detailData.actualActivityStartTime
          this.formData.actualActivityEndTime = this.detailData.actualActivityEndTime
          this.formData.shopAttachmentDTOList = this.allFileList
          saveOpenState(this.formData).then(res => {
            if (res.success === 1) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.closeDialog()
              this.$emit('success')
              this.saveLoading = false
            }
          }).catch(() => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.img-upload-container {
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  .icon-msg{
    margin-left: 10px;
    color: #999;
  }
}
/deep/.el-dialog{
  max-height: 750px;
  overflow: auto;
}
</style>
